<template>
    <div>
        <header-test name="购物车"/>
        <div v-if="!cartList.length" class="empty_cart">
            <img src="https://s.yezgea02.com/1604028375097/empty-car.png" alt="" />
            <div class="empty_tip">购物车无商品</div>
            <div class="go_shop" @click="goShop">前往购物</div>
        </div>
        <div v-else>
            
            <div class="cart_list">
                <van-checkout-group @change="grounpChange" v-model="checkResult">
                    <div
                        v-for="cartItem in cartList"
                        :key="cartItem.goodsId"
                        class="cart_item"
                    >
                        <van-checkbox :name="cartItem.cartItemId" class="cart_check" />
                        <div class="cart_content">
                            <img :src="cartItem.goodsCoverImg" alt="" class="cart_item_pic"/>
                            <div class="cart_item_info">
                                <div class="cart_item_info_desc">
                                    <span> {{ cartItem.goodsName }}</span>
                                    <span>x{{ cartItem.goodsCount }}</span>
                                </div>
                                <div class="cart_item_btn">
                                    <span class="cart_price">
                                        ￥ {{ cartItem.sellingPrice }}
                                    </span>
                                    <van-stepper 
                                        :name="cartItem.cartItemId"
                                        :model-value="cartItem.goodsCount"
                                        @change="stepChange"
                                        @before-change="stepChange"
                                        integer
                                        min="1"
                                        max="5"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </van-checkout-group>
            </div>
            <div class="settlement">
                <van-submit-bar :price="price" button-text="结算" @submit="onSubmit">
                    <van-checkbox v-model:checked="checked" @click="checkAll">全选
                    </van-checkbox>
                    <template #tip>
                        你的收货地址不支持配送，<span>修改地址</span>
                    </template>
                </van-submit-bar>
            </div>
        </div>
        <nav-bar />
    </div>
</template>
<script>
import NavBar from "@/components/NavBar.vue";
import HeaderTest from "@/components/HeaderTest.vue";
import { reactive,toRefs } from "@vue/reactivity";
import { getCart,modifyCart } from "@/service/cart";
import { computed,onMounted } from "@vue/runtime-core";
import { Toast } from "vant";
import router from "@/router";
export default {
    components: { NavBar, HeaderTest },
    setup(){
        const state = reactive({
            cartList:[],
            checked:true,
            checkResult:[],
        });
        const initCart = async()=>{
            const { data } = await getCart();
            state.cartList=data;
            state.checkResult=state.cartList.map((item)=>item.cartItemId);
        };
        
        onMounted(()=>{
            initCart();
        });

        const price = computed(()=>{
            const filterList = state.cartList.filter((item)=>{
                return state.checkResult.includes(item.cartItemId);
            });
            return filterList.reduce((priceTotal,item)=>{
                return (priceTotal+=item.sellingPrice*item.goodsCount*100);
            },0);
        });

        const grounpChange = (e)=>{
            state.checkResult=e;
            if(state.checkResult.length === state.cartList.length){
                state.checked = true;
            }
        };
        const checkAll = ()=>{
            state.checked=!state.checked;
            if(!state.checked){
                state.checkResult=[];
            }else{
                initCart();
            }
        };

        const stepChange = async (goodsCount,detail) => {
            try {
                if(goodsCount>5||goodsCount<1){
                    Toast.fail("超出单个商品的最大购买数量");
                    return;
                }
                if(state.cartList.filter((item)=>{item.goodsCount === goodsCount;}).length){
                    return;
                }
                
                const cartItemId = detail.name;
                await modifyCart({
                    cartItemId,
                    goodsCount,
                });
                state.cartList.forEach((item)=>{
                    if(item.cartItemId==cartItemId){
                        item.goodsCount = goodsCount;
                    }
                });
            }catch(error){
                console.log(error);
                Toast.fail('发生异常');
            }
        };

        const onSubmit =(e)=>{
            router.push({
                path:"/create-order",
            });
        };

        const goShop = ()=>{
            router.push("/home");
        }
        return {
            ...toRefs(state),
            checkAll,
            grounpChange,
            stepChange,
            onSubmit,
            goShop,
            price,
        };

    }
    
}

</script>

<stype lang="less" scoped>
@import "@/common/style/mixin";
.empty_cart {
    margin: 30% auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    > img {
        width: 10rem;
        height: 10rem;
        margin: 0 auto;
    }
    .empty_tip {
        text-align: center;
        font-size: 0.9rem;
        margin: 1rem 0;
    }
    .go_shop {
        width: 50%;
        height: 2.5rem;
        border-radius: 2rem;
        background: @primary;
        color: white;
        line-height: 2.5rem;
    }
} 
.cart_list {
    height: 100%;

    padding-left: 1rem;
    .cart_item {
        height: 6rem;
        display: flex;
        .cart_check {
            width: 1.5rem;
        }
        .cart_content{
            flex: 1;
            display: flex;
            align-items: center;
            .cart_item_pic {
                width: 6rem;
                height: 6rem;
            }
            .cart_item_info {
                height: 4rem;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 1rem 1rem;
                text-align: left;
                .cart_item_info_desc {
                    font-size: 0.7rem;
                    display: flex;
                    justify-content: space-between;
                }
                .cart_item_btn {
                    display: flex;
                    justify-content: space-between;
                    .cart_price {
                        color:red;
                        font-size: 1rem;
                    }
                }
            }
        }
    }
}
.settlement {
    .van-safe-area-bottom {
        margin-bottom: 3rem;
    }
}

</stype>